<!DOCTYPE html>
<html>
<head>
	<title>测试商城</title>
	<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
">
<link rel="stylesheet" type="text/css" href="../lib/weui.min.css">
<link rel="stylesheet" type="text/css" href="../css/jquery-weui.css">
<link rel="stylesheet" type="text/css" href="../css/style.css">
<link rel="stylesheet" type="text/css" href="../css/tanchu.css">
</head>
<body>
<header class="weui-header">
 <div class="weui-flex wy-iconlist-box">
	 <div class="weui-flex__item"><a class="wy-links-iconlist" onclick="dianji();"><div class="img"><img src="../images/icon-link2.png"></div><p>酒水专场</p></a></div>
	 <div class="weui-flex__item"><a href="pro_list.html" class="wy-links-iconlist"><div class="img"><img src="../images/icon-link2.png"></div><p>酒水专场</p></a></div>
	 <div class="weui-flex__item"><a href="pro_list.html" class="wy-links-iconlist"><div class="img"><img src="../images/icon-link2.png"></div><p>酒水专场</p></a></div>
	 <div class="weui-flex__item"><a href="pro_list.html" class="wy-links-iconlist"><div class="img"><img src="../images/icon-link2.png"></div><p>酒水专场</p></a></div>
	 </div>
<!-- //支付界面 -->
<!-- style="position:absolute;" -->
	 <div class="ftc_wzsf" id="zhifu" style="display:block;">
        <div class="srzfmm_box">
            <div class="qsrzfmm_bt clear_wl">
                <img src="../images/xx_03.jpg" class="tx close fl" onclick="guangbi();" >
                <img src="../images/jftc_03.png" class="tx fl">
                <span class="fl">请输入支付密码</span></div>
            <div class="zfmmxx_shop">
                <div class="mz">测试商品</div>
                <div class="zhifu_price">￥88.88</div></div>
            <ul class="mm_box" id="shurukuan">
                <li></li><li></li><li></li><li></li><li></li><li></li>
            </ul>
        </div>
        <div class="numb_box">
            <div class="xiaq_tb" id="xiahua">
                <img src="../images/jftc_14.jpg" height="10"></div>
            <ul class="nub_ggg">
                <li><a href="javascript:void(0);" class="zf_num">1</a></li>
                <li><a href="javascript:void(0);" class="zj_x zf_num">2</a></li>
                <li><a href="javascript:void(0);" class="zf_num">3</a></li>
                <li><a href="javascript:void(0);" class="zf_num">4</a></li>
                <li><a href="javascript:void(0);" class="zj_x zf_num">5</a></li>
                <li><a href="javascript:void(0);" class="zf_num">6</a></li>
                <li><a href="javascript:void(0);" class="zf_num">7</a></li>
                <li><a href="javascript:void(0);" class="zj_x zf_num">8</a></li>
                <li><a href="javascript:void(0);" class="zf_num">9</a></li>
                <li><a href="javascript:void(0);" class="zf_empty" id="qingkong">清空</a></li>
                <li><a href="javascript:void(0);" class="zj_x zf_num">0</a></li>
                <li><a href="javascript:void(0);" class="zf_del" id="shangchu">删除</a></li>
            </ul>
        </div>
        <div class="hbbj"></div>
    </div>

<!-- <div id="tangchu"></div> -->

</header>

<script type="text/javascript" src="../lib/jquery-2.1.4.js"></script>
<script type="text/javascript" src="../lib/fastclick.js"></script>
<script type="text/javascript" src="../js/jquery-weui.js"></script>
<script type="text/javascript" src="../js/swiper.js" charset='utf-8'></script>
<script type="text/javascript">
	$(function(){
		FastClick.attach(document.body);
	});
</script>
<script type="text/javascript">
var dianji =function () {
	$("#zhifu").animate({
		opacity:1,
		top:'0px',
	},200);

	// //关闭浮动 清空输入框样式、数据
 //        $(".close").click(function(){
 //            $(".ftc_wzsf").hide();
 //            $(".mm_box li").removeClass("mmdd");
 //            $(".mm_box li").attr("data","");
 //            i = 0;
 //        });
	 // $("#zhifu").show(1000);
	// $("#about").popup();
}

var guangbi =function () {
$("#zhifu").animate({
		opacity:1,
		top:'100%',
	},200);
}

      //数字键盘显示
        $("#xiahua").click(function(){
            $(".numb_box").slideUp(500);
        });
        //数字键盘隐藏
        $("#shurukuan").click(function(){
            $(".numb_box").slideDown(500);
        });



        //输入数字显示在列表框上  
         var i = 0;
        $(".nub_ggg li .zf_num").click(function(){
                
            if(i<6){
                $(".mm_box li").eq(i).addClass("mmdd");
                $(".mm_box li").eq(i).attr("data",$(this).text());
                i++
                if (i==6) {
                  setTimeout(function(){
                    var data = "";
                        $(".mm_box li").each(function(){
                        data += $(this).attr("data");
                    });
                    alert("支付成功"+data);
                  },100);
                };
            } 
        });


        //清空输入框数字
        $("#qingkong").click(function(){
            $(".mm_box li").removeClass("mmdd");
            $(".mm_box li").attr("data","");
            i = 0;
        });
          $("#shangchu").click(function(){
            if(i>0){
                i--
                $(".mm_box li").eq(i).removeClass("mmdd");
                $(".mm_box li").eq(i).attr("data","");
            }
        });
	$(document).ready(function (){
  // $("#tangchu").load('tanchukuang.html'); 

	});
</script>
</body>
</html>